<template>
  <a-modal  :visible.sync="dialogProcessImageVisibleInChild" title='流程进度' centered @cancel="handleCancel" :footer="null" width="80%">
<!--    <a-tabs @tabClick="tabClick" :defaultActiveKey="current" v-model="current">-->
<!--      <a-tab-pane key="form1" v-if="processInstanceId!=''||processDefinitionId!=''">-->
        <a-tag color="#FF0000" v-if="showTag">
          已审批
        </a-tag>
        <a-tag color="#00FF00" v-if="showTag">
          审批中
        </a-tag>
        <a-tag color="#BBBBBB" v-if="showTag">
          未审批
        </a-tag>
        <img :src="imagePath" alt="流程图" style="object-fit: cover;margin-left:-80px;width: 70%">
<!--      </a-tab-pane>-->
<!--    </a-tabs>-->
    <process-comment ref="form2"></process-comment>
  </a-modal>
</template>

<script>
  import Vue from 'vue'
  import ProcessComment from '../components/processComment'

  export default {
    name: 'ProcessImage',
    components: { ProcessComment },
    props: {
      visible: {
        type: Boolean,
        default: function() {
          return false
        }
      },
      processDefinitionId: {
        type: String,
        default: function() {
          return ''
        }
      },
      processInstanceId: {
        type: String,
        default: function() {
          return ''
        }
      }
    },
    computed: {
      dialogProcessImageVisibleInChild: {
        get() {
          return this.visible
        },
        set(val) {
          this.$emit('update:visible', val)
        }
      }
    },
    data() {
      return {
        showTag: false,
        title: '流程图',
        current: 'form1',
        bodyStyle: {
          height: '400px',
          width: '300px'
        },
        imagePath: ''
      }
    },
    created() {
      this.init()
    },
    methods: {
      tabClick(name) {
        this.current = name
        if (name = 'form2') {
          this.$nextTick(() => {
            this.$refs[this.current].setData({
              processInstanceId: this.processInstanceId
            })
          })
        }
      },
      handleCancel() {
        this.dialogProcessImageVisibleInChild = false
      },
      init() {
        let url = ''
        const token = Vue.ls.get('Access-Token')
        let params = {}
        if (this.processInstanceId && this.processInstanceId != null && this.processInstanceId !== '') {
          params.processInstanceId = this.processInstanceId
          this.showTag = true
          this.title = '审批进度'
          url = '/bpm/processInstance/processInstanceImage'
        } else if (this.processDefinitionId && this.processDefinitionId != null && this.processDefinitionId !== '') {
          params.processDefinitionId = this.processDefinitionId
          url = '/bpm/processDefinition/image'
          this.showTag = false
          this.title = '流程图'
        }
        this.axios({
          method: 'get',
          url: url,
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            Authorization:  token
          },
          params: params
        }).then(function(response) {  // 将后台的图片二进制流传华为base64
          return 'data:image/png;base64,' + response.data
        }).then(data => {
          this.imagePath = data // data即为图片地址
          this.$refs['form2'].setData({
            processInstanceId: this.processInstanceId
          })
        })
      }
    }
  }
</script>
<style scoped lang="scss">


</style>

